<!-- 主页面布局 -->
<template>
    <!-- 页面主体区域 -->
    <div id="home" class="min-h-[calc(100vh-4.5rem)] overflow-auto">
        <!-- 背景渐变层 -->
        <div class="w-screen h-screen -z-10 absolute 
        bg-gradient-to-b from-[#e1ecfe] to-white"></div>
        
        <!-- 顶部头部区域 -->
        <header>
            <!-- 用户信息区域 -->
            <div class="bg-[#ffffff] flex items-center 
            relative left-4 top-2 mb-6 w-16 rounded-full space-x-1">
                <!-- 用户图标和文字 -->
                <van-icon class-prefix="iconfont icon-wode text-2xl"
                 name="wode" color="#97aefe"/>
                <span class="text-xs font-sans">我的</span>
            </div>
            <!-- 搜索框 -->
            <van-cell-group inset class="border-4 
            border-solid border-[rgb(99,102,241)]">
                <!-- 搜索输入框 -->
                <van-field left-icon="search" 
                center class="h-16" to="/search"
                 placeholder="请输入搜索关键词"/>
            </van-cell-group>
        </header>
        
        <!-- 页面主要内容区域 -->
        <main>
            <!-- 功能区 -->
            <section class="mt-6 w-screen px-4 font-semibold">
                <!-- 功能板块 -->
                <div class="flex justify-between">
                    <!-- 口语教练板块 -->
                    <div class="flex w-[10.5rem] h-16 items-center justify-around
                    bg-white p-3 rounded-lg text-base">
                        <!-- 口语教练图片 -->
                        <img class="rounded-full w-[44px] h-[44px]" 
src="https://sfile.chatglm.cn/testpath/a2ffbdd0-3580-5f65-93a3-2bd77a346b1d_0.png?image_process=format,webp"
                            alt="">
                        <span>口语教练</span>
                    </div>
                    <!-- 拍照翻译模块 -->
                    <div class="flex w-[10.5rem] h-16 items-center justify-around
                     bg-white p-3 rounded-lg text-base" @click="startCamera">
                        <!-- 相机图标 -->
                        <van-icon class-prefix="iconfont icon-xiangji 
                        text-3xl justify-around" 
                        color="rgb(99,104,241)"/>
                        <span>拍照翻译</span>
                    </div>
                </div>
                <!-- 四个功能小模块 -->
                <div class="flex mt-3 justify-between">
                    <!-- 循环生成小模块 -->
                    <div class="flex flex-col w-20 h-20 items-center justify-around
                    bg-white rounded-lg text-sm" 
                    v-for="(item, index) in cardIconState" :key="index">
                        <!-- 图标 -->
                        <van-icon class-prefix="iconfont text-3xl justify-around" :class="item.icon"
                            color="rgb(99,104,241)"/>
                        <!-- 标题 -->
                        <span>{{ item.title }}</span>
                    </div>
                </div>
            </section>
            <!-- 功能选项卡 -->
            <section class="mt-4 px-4">
                <!-- 使用HScrollMenu组件显示功能列表 -->
                <HScrollMenu :items="btnIconState"/>
            </section>
            <!-- 视频和直播消息板块 -->
            <section class="w-screen">
                <!-- 分类标题 wow圈 -->
                <header class="flex justify-between px-4">
                    <span class="title font-bold">来Wow圈看知识视频</span>
                    <!-- 查看更多按钮 -->
                    <div class="text-gray-400 text-xs" @click="toWow('recommend')">
                        更多
                        <van-icon name="arrow"/>
                    </div>
                </header>
                <!-- 滚动显示视频列表 -->
                <div class="flex overflow-x-scroll min-h-96 space-x-2 px-4">
                    <!-- 循环生成视频项 -->
                    <div class="region-item flex-[0_0_auto]" 
                    v-for="item in videoRandom" :key="item.author">
                        <!-- 单个视频项 -->
                        <div class="w-40 flex flex-col justify-between">
                            <!-- 视频缩略图 -->
                            <div>
                                <div class="h-64 overflow-hidden rounded-xl">
                                    <img :src="item.image" alt=""/>
                                </div>
                                <!-- 视频标题 -->
                                <div class="text-sm font-normal pt-2">
                                    {{ item.title }}
                                </div>
                            </div>
                            <!-- 作者和点赞数 -->
                            <div class="flex text-xs justify-between">
                                <!-- 作者头像和名称 -->
                                <div class="flex items-center">
                                    <img :src="item.avatar" class="w-5 rounded-full" alt=""/>
                                    <span class="p-2 text-gray-400">
                                        {{ item.author }}
                                    </span>
                                </div>
                                <!-- 点赞数和图标 -->
                                <div class="p-2 text-gray-400">
                                    <span>{{ item.praise }}</span>
                                    <van-icon :name="item.icon"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 直播板块 -->
            <section>
                <!-- 直播标题 -->
                <header class="flex justify-between px-4">
                    <span class="title font-bold">精品伴学直播</span>
                    <!-- 查看更多按钮 -->
                    <div class="text-gray-400 text-xs" @click="toWow('live')">
                        更多
                        <van-icon name="arrow"/>
                    </div>
                </header>
                <!-- 滚动显示直播列表 -->
                <div class="flex w-screen overflow-x-scroll min-h-96 space-x-2 px-4">
                    <!-- 循环生成直播项 -->
                    <div class="region-item flex-[0_0_auto]"
                     v-for="item in liveRandom" :key="item.author">
                        <!-- 单个直播项 -->
                        <div class="w-40 flex flex-col justify-between">
                            <!-- 直播缩略图 -->
                            <div>
                                <div class="h-64 overflow-hidden rounded-xl">
                                    <img :src="item.image" alt=""/>
                                </div>
                                <!-- 直播标题 -->
                                <div class="text-sm font-normal pt-2">
                                    {{ item.title }}
                                </div>
                            </div>
                            <!-- 主播和热度 -->
                            <div class="flex text-xs justify-between">
                                <!-- 主播头像和名称 -->
                                <div class="flex items-center">
                                    <img :src="item.avatar" class="w-5 rounded-full" alt=""/>
                                    <span class="p-2 text-gray-400">
                                        {{ item.author }}
                                    </span>
                                </div>
                                <!-- 直播热度 -->
                                <div class="p-2 text-red-500">
                                    <span>{{ item.heat }}</span>
                                    <van-icon :name="item.icon"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        
        <!-- 摄像头视频流 -->
        <video v-if="hasCameraAccess" class="fixed top-0 left-0 right-0 
            bottom-0" ref="videoRef" width="640" height="100vh" autoplay playsinline></video>
        
        <!-- 提示底部刷到底的信息 -->
        <div class="w-screen h-28 p-3 text-center text-xs text-gray-500" @click="router.push('/xiaoq')">
            刷到底了，
            <!-- 带有渐变效果的文字 -->
            <span style="
                background-image: linear-gradient(to right, violet,indigo,blue);
                
                color: transparent;
                display: inline;">
                去看看小Q吧
            </span>
        </div>
    </div>
</template>

<!-- Vue脚本部分 -->
<script setup lang="ts">
// 引入HScrollMenu组件
import HScrollMenu from '@/components/HScrollMenu.vue';
// 引入图标状态管理store
import { useIconStore } from '@/stores/IconStore';
// 引入视频数据store
import { useVideoStore } from '@/stores/VideoStore';

// 引入随机函数
import { selectUniqueRandom } from '@/utils/utils';
// 引入Vue响应式属性和路由工具
import { toRefs } from 'vue';
import { ref, onUnmounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';

// 获取图标store中的数据
const iconStore = useIconStore();
const { cardIconState, btnIconState, homeActive } = toRefs(iconStore);

// 获取视频数据store中的数据
const videoStore = useVideoStore();
const { VideoState, LiveState } = toRefs(videoStore);

// 调用随机函数随机选中一些视频放在首页
const videoRandom = selectUniqueRandom(VideoState.value,8)

const liveRandom =selectUniqueRandom(LiveState.value,8)

// 初始化路由
const router = useRouter();

const toWow = (index: string) => {
    homeActive.value = 3;
    router.push(`/wow/${index}`);
};

// 定义视频流引用
const videoRef = ref<HTMLVideoElement | null>(null);
// 定义是否已获取摄像头访问权限的状态
const hasCameraAccess = ref(false);
// 定义媒体流变量
let mediaStream: MediaStream | null = null;

// 开启摄像头方法
const startCamera = async () => {
    try {
        // 设置摄像头访问权限状态为true
        hasCameraAccess.value = true;
        await nextTick();
        // 如果没有videoRef则返回
        if (!videoRef.value) return;
        // 请求用户媒体设备访问权限
        mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
        videoRef.value.srcObject = mediaStream;
    } catch (error) {
        console.error('Error accessing camera:', error);
    }
};

// 页面卸载时释放摄像头资源
onUnmounted(() => {
    if (mediaStream) {
        mediaStream.getTracks().forEach(track => track.stop());
    }
});
</script>

<style lang="scss" scoped></style>